import 'package:flutter/material.dart';
import 'package:yqys_target/utils/yq_colors.dart';
import 'package:yqys_target/utils/yq_screen_util.dart';

class DonationDialog extends StatefulWidget {
  final double userBalance;
  final double remainingAmount;
  final double greenEnergy;
  final Function(double) onConfirmDonation;
  final VoidCallback onClose;
  final VoidCallback onExchange;

  const DonationDialog({
    super.key,
    required this.userBalance,
    required this.remainingAmount,
    required this.greenEnergy,
    required this.onConfirmDonation,
    required this.onClose,
    required this.onExchange,
  });

  @override
  State<DonationDialog> createState() => _DonationDialogState();
}

class _DonationDialogState extends State<DonationDialog> {
  int? selectedIndex;
  final gridSpacing = 20.0;
  final horizontalPadding = 16.0;
  final itemsPerRow = 3;
  late  double screenWidth;
  late  double itemWidth;

  @override
  Widget build(BuildContext context) {
    final amounts = [1, 2, 3, 4, 5, 6]; // 示例金额选项
    screenWidth = MediaQuery.of(context).size.width;
    itemWidth = (screenWidth - horizontalPadding * 2 - gridSpacing*2 - 1) / 3.0;

    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      child: Stack(
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 标题栏
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: Center(
                  child: Text(
                    '爱心捐赠',
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              // 余额和能量信息
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: RichText(
                  text: TextSpan(
                    style: TextStyle(
                      fontSize: 14,
                      color: YQColors.primary,
                    ),
                    children: [
                      const TextSpan(text: '可用余额'),
                      TextSpan(
                        text: widget.userBalance.toStringAsFixed(0),
                        style: const TextStyle(
                          color: Colors.orange,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const TextSpan(text: '(剩余绿色能量'),
                      TextSpan(
                        text: widget.greenEnergy.toStringAsFixed(0),
                        style: const TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const TextSpan(text: ')'),
                      WidgetSpan(
                        child: GestureDetector(
                          onTap: widget.onExchange,
                          child: const Text(
                            '前往兑换',
                            style: TextStyle(
                              color: Colors.orange,
                              fontSize: 14,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 16),
              // 金额选择 Wrap
              Padding(
                padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
                child: Wrap(
                  spacing: gridSpacing,
                  runSpacing: gridSpacing,
                  children: List.generate(amounts.length, (index) {
                    final amount = amounts[index];
                    final isSelected = selectedIndex == index;
                    final isDisabled = amount > widget.userBalance || amount > widget.remainingAmount;
                    
                    return GestureDetector(
                      onTap: isDisabled ? null : () {
                        setState(() {
                          selectedIndex = index;
                        });
                      },
                      child: Container(
                        width:  itemWidth, // (屏幕宽度 - 两边padding - 两个spacing) / 3
                        height: 48,
                        decoration: BoxDecoration(
                          color: isDisabled 
                              ? Colors.grey[100] 
                              : isSelected 
                                  ? Colors.green[50] 
                                  : Colors.white,
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(
                            color: isDisabled 
                                ? Colors.grey[300]! 
                                : isSelected 
                                    ? Colors.green 
                                    : Colors.grey[300]!,
                            width: 1,
                          ),
                        ),
                        child: Center(
                          child: Text(
                            '${amount}元',
                            style: TextStyle(
                              color: isDisabled 
                                  ? Colors.grey[400] 
                                  : isSelected 
                                      ? Colors.green 
                                      : YQColors.primary,
                              fontSize: 16,
                              fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                            ),
                          ),
                        ),
                      ),
                    );
                  }),
                ),
              ),
              const SizedBox(height: 24),
              // 确认捐赠按钮
              Padding(
                padding: EdgeInsets.only(
                  left: 16,
                  right: 16,
                  bottom: YQScreenUtil.getBottomSafeHeight(),
                ),
                child: ElevatedButton(
                  onPressed: selectedIndex != null 
                      ? () => widget.onConfirmDonation(amounts[selectedIndex!].toDouble()) 
                      : null,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green,
                    minimumSize: const Size(double.infinity, 48),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(24),
                    ),
                  ),
                  child: const Text(
                    '确认捐赠',
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
          // 关闭按钮
          Positioned(
            right: 0,
            top: 0,
            child: IconButton(
              icon: const Icon(Icons.close),
              onPressed: widget.onClose,
            ),
          ),
        ],
      ),
    );
  }
} 